<template>
  <Layout>
    <div class="admin-container">
      <el-card shadow="hover" class="admin-card">
        <h2 class="admin-title">管理员控制台</h2>
        
        <el-alert
          title="此页面仅管理员可访问"
          type="info"
          show-icon
          class="admin-alert"
        ></el-alert>
        
        <el-divider content-position="left">用户管理</el-divider>
        
        <el-table
          :data="users"
          border
          style="width: 100%; margin-bottom: 20px;"
        >
          <el-table-column
            prop="id"
            label="用户ID"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="username"
            label="用户名"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="role"
            label="角色"
            width="120"
          >
            <template #default="scope">
              <el-tag :type="scope.row.role === 'admin' ? 'primary' : 'success'">
                {{ scope.row.role === 'admin' ? '管理员' : '普通用户' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="registerTime"
            label="注册时间"
          ></el-table-column>
          <el-table-column
            label="操作"
            width="200"
          >
            <template #default="scope">
              <el-button
                size="small"
                type="primary"
                @click="handleEditUser(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                size="small"
                type="danger"
                @click="handleDeleteUser(scope.row.id)"
                :disabled="scope.row.id === currentUserId"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <el-button type="primary" @click="handleAddUser">添加用户</el-button>
        
        <el-divider content-position="left">系统设置</el-divider>
        
        <el-card class="settings-card">
          <el-form :model="settings" label-width="120px">
            <el-form-item label="允许注册">
              <el-switch v-model="settings.allowRegistration"></el-switch>
            </el-form-item>
            <el-form-item label="登录尝试次数限制">
              <el-input-number
                v-model="settings.loginAttemptLimit"
                :min="1"
                :max="10"
                label="次数"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="会话超时时间(分钟)">
              <el-input-number
                v-model="settings.sessionTimeout"
                :min="5"
                :max="120"
                label="分钟"
              ></el-input-number>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveSettings">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-card>
    </div>
  </Layout>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Layout from '../components/Layout.vue'
import { useUserStore } from '../stores/user'
import { ElMessage } from 'element-plus'

// 用户状态
const userStore = useUserStore()

// 当前用户ID
const currentUserId = ref('')

// 用户列表
const users = ref([
  {
    id: '1',
    username: 'admin',
    role: 'admin',
    registerTime: '2023-01-01 00:00:00'
  },
  {
    id: '2',
    username: 'user1',
    role: 'user',
    registerTime: '2023-02-15 10:30:00'
  },
  {
    id: '3',
    username: 'user2',
    role: 'user',
    registerTime: '2023-03-20 15:45:00'
  }
])

// 系统设置
const settings = ref({
  allowRegistration: true,
  loginAttemptLimit: 5,
  sessionTimeout: 30
})

onMounted(() => {
  // 获取当前用户ID
  if (userStore.user) {
    currentUserId.value = userStore.user.id
  }
})

// 编辑用户
const handleEditUser = (user: any) => {
  ElMessage.info(`编辑用户: ${user.username}`)
}

// 删除用户
const handleDeleteUser = (userId: string) => {
  ElMessage.info(`删除用户ID: ${userId}`)
  // 实际项目中这里应该有确认对话框和API调用
}

// 添加用户
const handleAddUser = () => {
  ElMessage.info('添加新用户')
}

// 保存设置
const saveSettings = () => {
  ElMessage.success('系统设置已保存')
}
</script>

<style scoped>
.admin-container {
  max-width: 1200px;
  margin: 0 auto;
}

.admin-card {
  padding: 20px;
}

.admin-title {
  color: #1E293B;
  margin-top: 0;
  margin-bottom: 20px;
}

.admin-alert {
  margin-bottom: 20px;
}

.settings-card {
  padding: 20px;
  background-color: #F8FAFC;
}
</style>
